<template>
  <div class="homeHeader">
    <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
               class="left"/>
    <el-dropdown  class="el_dropdown_d" @command="dropMenu">
      <span class="el-dropdown-link">
        <span style="color: white">{{ user.username }}</span><i class="el-icon-arrow-down el-icon--right" style="color: white"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="forgetPass">修改密码</el-dropdown-item>
          <el-dropdown-item command='logoutBtn'>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import {getCurrentInstance, ref} from "vue";

export default {
  name: "UserInfoCom",
  setup(){
    const {proxy} = getCurrentInstance()

    let userinfo = JSON.parse(localStorage.getItem("user_info"))
    const user = {
      username: userinfo !== null ? userinfo.username : ref('')
    }

    const logoutBtn = () => {
      localStorage.removeItem("user_info")
      localStorage.removeItem("user_token")
      proxy.$router.push("/login")
    }

    const forgetPass = () =>{
      proxy.$router.push("/changePwd")
    }

    const dropMenu=(item)=>{
      if (item === 'forgetPass'){
        forgetPass()
      }else{
        logoutBtn()
      }
    }


    return {dropMenu,user}
  }
}
</script>

<style scoped>

</style>